/*
  学习目标：在jsx中可以在`{}`来使用js表达式
  步骤：
     1. string number - 正常渲染
     2. boolean undefined null - 不会渲染
     3. 引用类型：对象 数组 函数
        ❌在虚拟dom的内容中，不能直接渲染对象
*/
import React from 'react';
import ReactDOM from 'react-dom';

/* 
  jsx 的本质是 createElement，创建的是一个虚拟dom(对象)
  根据对象生成dom，虚拟dom里面的内容，只是 虚拟对象中的某一个属性
  又给我传了一个对象，那么我是帮你渲染内容，还是帮你再生成dom结构呢？
*/
const obj = { name: 'zs', age: 20, info: {} };
const dom = (
  <div>
    {obj.name}-{obj.age}
    {/* 报错 */}
    {/* <div>{obj.info}</div> */}
  </div>
);
console.dir(dom);

ReactDOM.render(dom, document.getElementById('root'));
